﻿<%@ Page Title="" Language="C#" MasterPageFile="~/admin/Layout1.Master" AutoEventWireup="true" CodeBehind="addClothes.aspx.cs" Inherits="DeVetma.admin.addClothes" %>
<asp:Content ID="pageStyle" ContentPlaceHolderID="pageStylePlaceholder" runat="server">
    <style type="text/css">
        .formSection { height: auto; width: 420px; }
        .selectorFieldLeft { height: auto; width: 250px; }
        .selectorFieldRight { height: auto; width: 78px; }
        .clothes-image-preview { height: 160px; width: 100px; }
        .hide { visibility: hidden }
    </style>
    <style type="text/css">
        .clothesImage {
	        padding: 10px 55px 6px 52px;
	        position: relative;
        }
        .clothesImage a {
            display: block;
            float: left;
        }
        .clothesImage img {
	        border: 1px solid #ccc;
	        background-color: white;
	        padding: 10px;
	        margin: 7px;
	        display: block;
	        float: left;
        }
        a.clothesImage-prev, a.clothesImage-next {
	        background: url(/admin/import/jcarousel/img/miscellaneous_sprite.png) no-repeat transparent;
	        width: 45px;
	        height: 50px;
	        display: block;
	        position: absolute;
	        top: 85px;
        }
        a.clothesImage-prev {			left: -10px;
					        background-position: 0 0; }
        a.clothesImage-prev:hover {		background-position: 0 -50px; }
        a.clothesImage-prev.disabled {	background-position: 0 -100px !important;  }
        a.clothesImage-next {			right: -10px;
					        background-position: -50px 0; }
        a.clothesImage-next:hover {		background-position: -50px -50px; }
        a.clothesImage-next.disabled {	background-position: -50px -100px !important;  }
        a.clothesImage-prev.disabled, a.next.disabled {
	        cursor: default;
        }

        a.clothesImage-prev span, a.next span {
	        display: none;
        }
        .clothesImage-pagination {
	        margin-top: 10px;
	        text-align: center;
        }
        .clothesImage-pagination a {
	        background: url(/admin/import/jcarousel/img/miscellaneous_sprite.png) 0 -300px no-repeat transparent;
	        width: 15px;
	        height: 15px;
	        margin: 0 5px 0 0;
	        display: inline-block;
        }
        .clothesImage-pagination a.selected {
	        background-position: -25px -300px;
	        cursor: default;
        }
        .clothesImage-pagination a span {
	        display: none;
        }
    </style>
</asp:Content>
<asp:Content ID="content" ContentPlaceHolderID="contentPlaceholder" runat="server">
    <div class="section">
        <div class="section-header">
            <h3>Add Clothes</h3>
            <div class="btn-toolbar section-actions" style="margin-top: 7px">
                <a href="#" id="btnReset" class="btn btn-danger">
                    <i class="icon-remove"></i>
                    Reset All
                </a>
                <a href="#" id="btnAdd" class="btn btn-success">
                    <i class="icon-ok"></i>
                    Add Clothes
                </a>
            </div>
        </div>
        <div class="section-body">
            <form id="addClothesForm" method="post" runat="server">
                <div class="span5 pull-left formSection">
                    <fieldset>
                        <legend>General</legend>
                        <label for="cType">Clothes Type</label>
                        <asp:DropDownList ID="cType" runat="server" CssClass="span5 "
                            ClientIDMode="Static" >
                        </asp:DropDownList>
                        <label for="cDescription">Description</label>
                        <asp:TextBox ID="cDescription" ClientIDMode="Static" runat="server"
                            CssClass="span5 validate[required]" />
                        <label for="cColor">Color</label>
                        <div class="controls controls-row">
                            <asp:DropDownList ID="cColor" ClientIDMode="Static" runat="server"
                                CssClass="span4 selectorFieldLeft" />
                            <a href="/admin/manageOthers.aspx" class="btn span1 selectorFieldRight">
                                <i class="icon-edit"></i>
                                Colors
                            </a>
                        </div>
                        <label for="cMaterial">Materials</label>
                        <div class="controls controls-row">
                            <asp:DropDownList ID="cMaterial" ClientIDMode="Static" runat="server"
                                CssClass="span4 selectorFieldLeft" />
                            <a href="/admin/manageOthers.aspx" class="btn span1 selectorFieldRight">
                                <i class="icon-edit"></i>
                                Materials
                            </a>
                        </div>
                    </fieldset>
                </div>
                <div class="span5 pull-left formSection">
                    <fieldset>
                        <legend>Pricing &amp; Inventory</legend>
                        <label for="cQuanOnHand">Quantity on Hand</label>
                        <asp:TextBox ID="cQuanOnHand" ClientIDMode="Static" runat="server" placeholder="Minimum 0"
                            CssClass="span5 validate[required,min[0],custom[integer]]" />

                        <label for="cCost">Apparel Cost</label>
                        <asp:TextBox ID="cCost" ClientIDMode="Static" runat="server" placeholder="At least RM1"
                            CssClass="span5 validate[required,min[1],custom[number]]" />

                        <label for="cSelling">Selling Price</label>
                        <asp:TextBox ID="cSelling" ClientIDMode="Static" runat="server" placeholder="At least RM1"
                            CssClass="span5 validate[required,min[1],custom[number]]" />
                    </fieldset>
                </div>
                <div class="clearfix">&nbsp;</div>
                <div class="span5 pull-left formSection">
                    <fieldset>
                        <legend>Dimension</legend>
                        <label for="cShoulder">Shoulder</label>
                        <asp:TextBox ID="cShoulder" ClientIDMode="Static" runat="server" placeholder="U.S. Metrics"
                            CssClass="span5 validate[required,min[1],custom[integer]]" />

                        <label for="cWaist">Waist</label>
                        <asp:TextBox ID="cWaist" ClientIDMode="Static" runat="server" placeholder="U.S. Metrics"
                            CssClass="span5 validate[required,min[1],custom[integer]]" />

                        <label for="cHips">Hips</label>
                        <asp:TextBox ID="cHips" ClientIDMode="Static" runat="server" placeholder="U.S. Metrics"
                            CssClass="span5 validate[required,min[1],custom[integer]]" />

                        <label for="cLength">Length</label>
                        <asp:TextBox ID="cLength" ClientIDMode="Static" runat="server" placeholder="U.S. Metrics"
                            CssClass="span5 validate[required,min[1],custom[integer]]" />
                    </fieldset>
                </div>
                <div class="span5 pull-left formSection">
                    <fieldset>
                        <legend>Images</legend>
                        <div class="span5 well" style="margin-left: 0">
                            <div class="clothesImage">
                                <div id="clothesImagePreview">
                                    <a href="#" rel="tooltip" title="Model Image">
                                        <img src="/admin/contents/1.png" alt="" class="clothes-image-preview"/>
                                    </a>
                                    <a href="#" rel="tooltip" title="View Image">
                                        <img src="/admin/contents/2.png" alt="" class="clothes-image-preview"/>
                                    </a>
                                    <a href="#" rel="tooltip" title="Try Image">
                                        <img src="/admin/contents/3.png" alt="" class="clothes-image-preview"/>
                                    </a>
                                    <a href="#" rel="tooltip" title="Additional Image 1">
                                        <img src="/admin/contents/4.png" alt="" class="clothes-image-preview"/>
                                    </a>
                                    <a href="#" rel="tooltip" title="Additional Image 2">
                                        <img src="/admin/contents/5.png" alt="" class="clothes-image-preview"/>
                                    </a>
                                    <a href="#" rel="tooltip" title="Additional Image 3">
                                        <img src="/admin/contents/6.png" alt="" class="clothes-image-preview"/>
                                    </a>
                                </div>
                                <div class="jc-clearfix"></div>
                                <a class="clothesImage-prev" id="clothesImagePreview_prev" href="#"><span></span></a>
                                <a class="clothesImage-next" id="clothesImagePreview_next" href="#"><span></span></a>
                            </div>
                            <div class="clothesImage-pagination" id="clothesImagePreview_pag"></div>
                            <div class="controls controls-row">
                                <label for="imageTypeUpload">Clothes Image</label>
                                <select id="imageTypeUpload" class="span3">
                                    <option value="cModelImg">Model Image</option>
                                    <option value="cViewImg">View Image</option>
                                    <option value="cTryImg">Try Image</option>
                                    <option value="cPic1">Additional Image 1</option>
                                    <option value="cPic2">Additional Image 2</option>
                                    <option value="cPic3">Additional Image 3</option>
                                </select>
                                <a href="#" id="btnUpload" class="btn span1 selectorFieldRight">
                                    <i class="icon-upload"></i>
                                    Upload
                                </a>
                            </div>
                        </div>
                    </fieldset>
                </div>
                <div class="clearfix">&nbsp;</div>
                <asp:FileUpload ID="cModelImg" runat="server" CssClass="hide" accept="image/png" ClientIDMode="Static"/>
                <asp:FileUpload ID="cViewImg" runat="server" CssClass="hide" accept="image/png" ClientIDMode="Static"/>
                <asp:FileUpload ID="cTryImg" runat="server" CssClass="hide" accept="image/png" ClientIDMode="Static"/>
                <asp:FileUpload ID="cPic1" runat="server" CssClass="hide" accept="image/png" ClientIDMode="Static"/>
                <asp:FileUpload ID="cPic2" runat="server" CssClass="hide" accept="image/png" ClientIDMode="Static"/>
                <asp:FileUpload ID="cPic3" runat="server" CssClass="hide" accept="image/png" ClientIDMode="Static"/>
            </form>
        </div>
    </div>
</asp:Content>
<asp:Content ID="pageScript" ContentPlaceHolderID="pageScriptPlaceholder" runat="server">
    <script type="text/javascript">
        $(document).ready(function () {
            $("#addClothesForm").validationEngine("attach", { scroll: false, autoHidePrompt: true });

            $("#clothesImagePreview").carouFredSel({
                align: "center",
                items: 2,
                height: "auto",
                width: "250",
                circular: false,
                infinite: false,
                auto: false,
                prev: {
                    button: "#clothesImagePreview_prev",
                    key: "left"
                },
                next: {
                    button: "#clothesImagePreview_next",
                    key: "right"
                },
                pagination: "#clothesImagePreview_pag"
            });

            $("#btnAdd").click(function (ev) {
                ev.preventDefault();

                if ($("#addClothesForm").validationEngine("validate"))
                    $("#addClothesForm")[0].submit();

                return false;
            });

            $("#btnReset").click(function (ev) {
                ev.preventDefault();

                $("#addClothesForm")[0].reset();

                return false;
            });

            $("#btnUpload").click(function (ev) {
                ev.preventDefault();

                var selector = $("#imageTypeUpload option:selected").val();
                $("#" + selector).trigger("click");

                return false;
            });

            <% if (isSubmitted) { %>
                messageBox("Add Clothes",'<%= submittedResponse %>',null);
            <%} %>
        });
    </script>
</asp:Content>
